<template>
    <div class="scrollable-form">
        <div class="form-wrapper">
            <el-form ref="formData" :model="formData" label-position="left" label-width="80px" size="medium">
                <!-- 第一行 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="中文名" :label-width="width" class="form-item" prop="wzm">
                            <el-input v-model="formData.wzm" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学名" :label-width="width" class="form-item">
                            <el-input v-model="formData.ldm" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="拉丁名" :label-width="width" class="form-item">
                            <el-input v-model="formData.ldmfull" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第二行 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="观测者" :label-width="width" class="form-item">
                            <el-input v-model="formData.guance" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="实体数量" :label-width="width" class="form-item">
                            <el-input v-model="formData.shitishuliang" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="痕迹种类及数量" :label-width="width" class="form-item">
                            <el-input v-model="formData.henjishuliang" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第三行 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="经度" :label-width="width" class="form-item">
                            <el-input v-model="formData.jd" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="维度" :label-width="width" class="form-item">
                            <el-input v-model="formData.wd" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="海拔" :label-width="width" class="form-item">
                            <el-input v-model="formData.hb" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第四行 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="坡度" :label-width="width" class="form-item">
                            <el-input v-model="formData.podu" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="坡位" :label-width="width" class="form-item">
                            <el-input v-model="formData.powei" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="坡向" :label-width="width" class="form-item">
                            <el-input v-model="formData.poxiang" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第五行 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="栖息地类型" :label-width="width" class="form-item">
                            <el-input v-model="formData.qixi" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="调查日期及发现时间" :label-width="width" class="form-item">
                            <el-date-picker v-model="formData.diaochariqi" type="datetime" placeholder="选择日期和时间"
                                style="width: 100%" :clearable="false" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="栖息地干扰" :label-width="width" class="form-item">
                            <el-input v-model="formData.qixiganrao" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第六行 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="盟市" :label-width="width" class="form-item">
                            <el-input v-model="formData.mengshi" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="旗县" :label-width="width" class="form-item">
                            <el-input v-model="formData.qixian" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="保护等级" :label-width="width" class="form-item">
                            <el-select v-model="formData.protectlevel" placeholder="请选择" style="width: 100%"
                                @change="handleOptionChange1">
                                <el-option v-for="list in list1" :key="list.value" :label="list.label"
                                    :value="list.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第七行 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="发现地址" :label-width="width" class="form-item">
                            <el-input v-model="formData.location" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="数据来源" :label-width="width" class="form-item">
                            <el-input v-model="formData.source" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="动物类型" :label-width="width" class="form-item">
                            <el-select v-model="formData.category" placeholder="请选择" style="width: 100%"
                                @change="handleOptionChange1">
                                <el-option v-for="list in list2" :key="list.value" :label="list.label"
                                    :value="list.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 特征描述单独一行 -->
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="特征描述" :label-width="width" class="form-item">
                            <el-input v-model="formData.tezhengmiaoshu" type="textarea" :rows="4" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 分布多度描述单独一行 -->
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="分布多度描述" :label-width="width" class="form-item">
                            <el-input v-model="formData.fenbuduodumiaoshu" type="textarea" :rows="4" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="照片编号" :label-width="width" class="form-item">
                            <div class="jdt">
                                <file-upload :upload-api-url="uploadApiUrl" :url="formData.zpbh"
                                    @upload-success="handleUploadSuccess" @delete-image="handleDeleteImage" />
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="生境照片编号" :label-width="width" class="form-item">
                            <div class="jdt">
                                <file-upload :upload-api-url="uploadApiUrl" :url="formData.sjzpbh"
                                    @upload-success="handleUploadSuccess1" @delete-image="handleDeleteImage1" />
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="btn" style="text-align: center">
            <el-button style="margin-right: 8px" @click="goBack">返回</el-button>
            <el-button type="danger" style="background-color: #1890ff; border-color: #1890ff" @click="onSubmit">{{
                this.button }}</el-button>
        </div>
    </div>
</template>

<script>
import FileUpload from "@/components/common/AnimalUpload/index.vue";
import { getSessionStorage } from '@/utils/auth'
export default {
    name: "FishAdd",
    components: {
        FileUpload,
    },
    data() {
        return {
            button: "新增数据",
            width: "140px",
            isFormValid: false,
            isDataLoaded: false,
            uploadApiUrl: "",
            formData: {
                wzm: null,
                ldm: null,
                shitishuliang: null,
                henjishuliang: null,
                jd: null,
                wd: null,
                hb: null,
                id: null,
                podu: null,
                powei: null,
                poxiang: null,
                qixi: null,
                diaochariqi: null,
                qixiganrao: null,
                protectlevel: null,
                location: null,
                mengshi: null,
                qixian: null,
                source: null,
                guance: null,
                zpbh: null,
                sjzpbh: null,
                tezhengmiaoshu: null,
                fenbuduodumiaoshu: null,
                category: "01",
            },
            plantList: [],
            list1: [
                { label: "一级", value: "01" },
                { label: "二级", value: "02" },
                { label: "未列入", value: "03" },
            ],
            list2: [
                { label: "哺乳动物", value: "01" },
                { label: "鸟类", value: "02" },
                { label: "鱼类", value: "03" },
                { label: "节肢动物", value: "04" },
            ],
        };
    },
    created() {
        let data = JSON.parse(getSessionStorage('dwdcParams'))
        if (this.$route.params.id && this.$route.params.id == data.id) {
            this.formData = data;
            this.button = "修改数据";
            this.isDataLoaded = true;
        } else {
            this.button = "新增数据";
            this.isDataLoaded = true;
        }
    },
    mounted() {
        this.uploadApiUrl = process.env.VUE_APP_BASE_API + 'rest/uploadpic';
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        onSubmit() {
            if (!this.formData.wzm) {
                this.$message.error("中文名不能为空");
                return;
            }
            console.log("submit!", this.formData);
            this.plantList.push(this.formData);
            if (this.button === "新增数据") {
                console.log("数据", this.plantList);
                this.$api
                    .addSurveyPoint(this.formData)
                    .then((res) => {
                        console.log("新增成功", res);
                        this.$message.success("新增成功");
                        this.$store.dispatch("animal/fetchAnimalData");
                        this.goBack();
                    })
                    .catch((error) => {
                        console.error("新增失败", error);
                    });
            } else if (this.button === "修改数据") {
                console.log("修改图片", this.formData.zpcpath);
                console.log("点击了修改");
                this.$api
                    .editSurveyPoint(this.formData)
                    .then((res) => {
                        console.log("修改成功", res);
                        this.$message.success("修改成功");
                        this.goBack();
                    })
                    .catch((error) => {
                        console.error("修改失败", error);
                    });
            }
        },
        handleUploadSuccess(uploadInfo) {
            console.log("2222222", uploadInfo);
            this.formData.zpbh = this.formData.zpbh
                ? `${this.formData.zpbh},${uploadInfo.fileName}`
                : uploadInfo.fileName;
            this.formData.zpbh = this.formData.zpbh.replace(/,+$/, "");
        },
        handleUploadSuccess1(uploadInfo) {
            console.log("111", uploadInfo);
            this.formData.sjzpbh = this.formData.sjzpbh
                ? `${this.formData.zpbh},${uploadInfo.fileName}`
                : uploadInfo.fileName;
            this.formData.sjzpbh = this.formData.sjzpbh.replace(/,+$/, "");
        },
        handleDeleteImage(payload) {
            console.log(payload);
            const { fileName } = payload;
            if (this.formData) {
                if (this.formData.zpbh) {
                    const fileNames = this.formData.zpbh.split(",");
                    const updatedFileNames = fileNames.filter(
                        (name) => name !== fileName
                    );
                    this.formData.zpbh = updatedFileNames.join(",");
                }
                this.formData.zpbh = this.formData.zpbh.replace(/,+$/, "");
            }
        },
        handleDeleteImage1(payload) {
            console.log(payload);
            const { fileName } = payload;
            if (this.formData) {
                if (this.formData.sjzpbh) {
                    const fileNames = this.formData.sjzpbh.split(",");
                    const updatedFileNames = fileNames.filter(
                        (name) => name !== fileName
                    );
                    this.formData.sjzpbh = updatedFileNames.join(",");
                }
                this.formData.sjzpbh = this.formData.sjzpbh.replace(/,+$/, "");
            }
        },
        handleOptionChange1() {
            switch (this.formData.protectlevel) {
                case "一级":
                    this.formData.protectlevel = "一级";
                    break;
                case "二级":
                    this.formData.protectlevel = "二级";
                    break;
                case "未列入":
                    this.formData.protectlevel = "未列入";
                    break;
                default:
                    break;
            }
        },
    },
};
</script>

<style scoped>
.scrollable-form {
    display: flex;
    flex-direction: column;
    height: 90vh;
}

.form-wrapper {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 20px;
    border-bottom: none;
}

.form-item {
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fafafa;
}

.label {
    font-weight: bold;
    text-align: left;
}

.el-input {
    width: 100%;
}

.btn {
    padding: 20px;
    border-top: 1px solid #ccc;
    position: sticky;
    bottom: 0;
    background-color: #fff;
}

.jdt {
    overflow: hidden;
    display: inline-block;
    width: 100%;
    text-align: start;
    vertical-align: top;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}
</style>
